<template>
  <div class="flex flex-col items-center">
    <div class="container max-w-6xl my-2 px-2">
      <Carousel :value="carouselItems" :autoplayInterval="5000">
        <template #item="item">
          <router-link class="flex justify-center relative" :to="item.data.link">
            <img :src="item.data.img" />
            <div
              class="absolute bottom-0 left-0 right-0 p-4 text-xl text-white bg-black bg-opacity-50"
            >{{ item.data.title }}</div>
          </router-link>
        </template>
      </Carousel>

      <div class="flex flex-col space-y-2">
        <div class="flex justify-between">
          <h3 class="text-2xl font-bold text-indigo-700">
            优秀设计师
            <span class="ml-2 text-gray-500">Designer</span>
          </h3>
          <div>
            <router-link to="/designer" class="text-blue-600 text-lg font-semibold">更多</router-link>
          </div>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 justify-items-center gap-y-8 gap-x-2">
          <div v-for="item in designerItems" class="inline-block">
            <router-link :to="item.link" class="group relative inline-block">
              <img
                :src="item.img"
                height="200"
                width="200"
                class="group-hover:-translate-y-2 shadow-md group-hover:shadow-lg transition-all shadow-gray-500 group-hover:shadow-gray-700 rounded-lg overflow-hidden"
              />
              <div
                class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 text-white text-center p-2 group-hover:-translate-y-2 transition-all rounded-b-lg"
              >{{ item.name }}</div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'Index',
})
</script>

<script lang="ts" setup>
import { defineComponent, onMounted, ref } from 'vue'
import Carousel from 'primevue/carousel'

const carouselItems = ref<{ img: string, title: string, link: string }[]>()
const designerItems = ref<{ img: string, name: string, link: string }[]>([
  {
    img: 'https://pic.brooke-zb.top/fashion_textile/default_avatar.png',
    name: '设计师1',
    link: '/designer/1',
  },
  {
    img: 'https://pic.brooke-zb.top/fashion_textile/default_avatar.png',
    name: '设计师2',
    link: '/designer/5',
  },
  {
    img: 'https://pic.brooke-zb.top/fashion_textile/aa3b9cff-5230-4638-9dc7-0262e9f53fd7.jpg',
    name: '200万的logo',
    link: '/designer/7',
  },
  {
    img: 'https://pic.brooke-zb.top/fashion_textile/default_avatar.png',
    name: '设计师4',
    link: '/designer/4',
  }
])

onMounted(() => {
  carouselItems.value = [
    {
      img: 'https://pic.brooke-zb.top/fashion_textile/b36e3430-1675-4c1b-89b1-28280d9722a7.jpg',
      title: '如何用双眼发现生活中的美',
      link: '/article/1'
    },
    {
      img: 'https://pic.brooke-zb.top/fashion_textile/a75aed3b-0a70-4d2e-8d49-74de8b9c55e6.jpg',
      title: '设计就是挖掘不一样的美',
      link: '/article/2'
    },
    {
      img: 'https://pic.brooke-zb.top/fashion_textile/0380896e-e078-4d41-9c61-17e7394a38ab.jpg',
      title: '一篇文章，搞明白设计的四大原则',
      link: '/article/3'
    },
    {
      img: 'https://pic.brooke-zb.top/fashion_textile/c0206942-73d8-4e8f-8c4e-d33d6e83448f.jpg',
      title: '十万字教你从零手绘服装设计图',
      link: '/article/4'
    },
    {
      img: 'https://pic.brooke-zb.top/fashion_textile/129b2074-8443-498d-a3ab-0f09bdec1fc2.jpg',
      title: '花纹在服装设计中的应用',
      link: '/article/5'
    },
  ]
})
</script>
